<template>
	<view class="comp-custom-nav" :style="[paddingTopStyle,boxStyle]">
		<view class="nav-body">
		
			<view class="box-nav-title">
				<text>{{title}}</text>
				<view class="box-nav-other">
					<slot name="navLeft"><image v-if="showBackArrow" class="icon-arrow" src="/static/my/back_btn.png"
						@tap="handleBack"></image></slot>
					
					<slot name="navRight"></slot>
				</view>
			</view>
		
		
		</view>
	</view>
	<view v-if="isPlaced" :style="placeBoxStyle"></view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		// 导航栏是否占位
		isPlaced: {
			type: Boolean,
			default: false
		},
		showBackArrow: {
			type: Boolean,
			default: false
		},
		backFunc: {
			type: Function,
			default: null
		},
		boxStyle: {
			type: Object,
			default: () => {
				return {}
			}
		},
	})
	let navHeightInfo = getNavHeightTop();
	const paddingTop = navHeightInfo.statusBarHeight;
	const paddingTopStyle = ref({
		"paddingTop": `${paddingTop}px`,
	})
	const placeBoxStyle = ref({
		"paddingTop": `${navHeightInfo.navTotalHeight}px`
	})
	const handleBack = () => {
		console.log(1111)
		try {
			if (props.backFunc) {
				props.backFunc();
				return;
			}
		} catch (e) {
			//TODO handle the exception
			console.log(e, ">>>>>>>>>>")
		}
		uni.navigateBack()
	}
</script>

<style lang="less" scoped>
	.comp-custom-nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		background: transparent;
		font-family: PingFang SC;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: 600;
		box-sizing: border-box;
		z-index: 4;

		.nav-body {
			position: relative;
			width: 100%;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

		.box-nav-title {
			position: relative;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			// 30rpx箭头+10rpx间隔
			text-align: center;
			// text-align: left;
			box-sizing: border-box;

			.box-nav-other {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
			}

			.icon-arrow {
				position: relative;
				width: 24rpx;
				height: 42rpx;
				vertical-align: top;
			}
		}
	}
</style>